<template>
  <div class="index">
    <head-text titleText="活动销售统计"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <el-form
          ref="searchFrom"
          :model="searchFrom"
          inline
          label-width="100px"
        >
          <el-form-item
            label="活动日期："
            label-width="100px"
            prop="activityTime"
          >
            <el-date-picker
              size="mini"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="searchFrom.activityTime"
              @change="selectDateTime"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动一：" prop="activityIdOne">
            <el-select
              clearable
              v-model="searchFrom.activityIdOne"
              placeholder="请选择活动"
              size="mini"
            >
              <el-option
                v-for="(data, index) in ActivityList"
                :key="index"
                :label="data.activityName"
                :value="data.activityId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动二：" prop="activityIdTwo">
            <el-select
              clearable
              v-model="searchFrom.activityIdTwo"
              placeholder="请选择活动"
              size="mini"
            >
              <el-option
                v-for="(data, index) in ActivityList"
                :key="index"
                :label="data.activityName"
                :value="data.activityId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getInitList" size="mini"
              >查询</el-button
            >
            <el-button type="danger" plain @click="rest" size="mini"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容区 -->
      <div>
        <!-- 合计 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          size="mini"
          v-if="false"
        >
          <el-table-column prop="num1" label="销售总额（元）" align="center">
          </el-table-column>
          <el-table-column prop="num2" label="实收总额（元）" align="center">
          </el-table-column>
          <el-table-column prop="num3" label="折扣总额（元）" align="center">
          </el-table-column>
          <el-table-column prop="num4" label="核销笔数（笔）" align="center">
          </el-table-column>
        </el-table>
        <!-- echart图表 -->

        <echart-com
          :echartForm="activityIds"
          :activityName="activityName"
        ></echart-com>
        <!-- 表格 -->

        <table-com :activityIds="activityIds"></table-com>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from "@u/cookie";
import timeFormat from "@u/timeFormat";
import headText from "@c/headText";
import echartCom from "./echartCom";
import tableCom from "./tableCom";
import { getLocalActivityApi } from "@s/api";
export default {
  name: "index",
  data() {
    return {
      activityName: [],
      ActivityList: [],
      activityIds: [],
      searchFrom: {
        activityIdOne: "",
        activityIdTwo: "",
        activityTime: ""
      },
      tableData: [{ num2: 41223 }]
    };
  },
  methods: {
    rest() {
      this.$refs.searchFrom.resetFields();
      this.ActivityList = [];
      this.activityIds = "";
    },
    // 活动信息
    getActivityList(val) {
      let json = {
        startDate: val ? timeFormat.currentTime(val[0]) : "",
        endDate: val ? timeFormat.currentTime(val[1]) : ""
      };
      getLocalActivityApi(json).then(res => {
        res = res.list;
        // 特许商品判断权限筛选
        // 查询是否有活动权限
        let getActivityId =
          JSON.parse(localStorage.getItem("mb_userInfo")).activityIds || "";
        if (getActivityId && getActivityId != "0") {
          // 单个活动用户
          getActivityId = getActivityId.split(","); // 字符串转数组
          // 活动权限筛选
          let activityArr = [];
          res.forEach(item => {
            if (getActivityId.indexOf(item.id) > -1) {
              activityArr.push(item);
            }
          });
          this.ActivityList = activityArr;
        } else {
          // 所有活动用户

          this.ActivityList = res;
        }
      });
    },
    getInitList() {
      let activityIds = [];
      if (this.searchFrom.activityIdOne) {
        activityIds.push(this.searchFrom.activityIdOne);
      }
      if (this.searchFrom.activityIdTwo) {
        activityIds.push(this.searchFrom.activityIdTwo);
      }
      this.activityIds = activityIds;
      //  获取活动名称显示
      var arrName = [];
      this.activityIds.forEach(v => {
        this.ActivityList.forEach(item => {
          if (v == item.activityId) {
            arrName.push(item.activityName);
          }
        });
      });
      // 没有选择时点击查询
      if (this.activityIds.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择筛选条件！"
        });
      }
      this.activityName = arrName;
    },
    getList() {},
    selectDateTime(val) {
      this.searchFrom.activityIdOne = "";
      this.searchFrom.activityIdTwo = "";
      this.ActivityList = [];
      if (val) {
        this.getActivityList(val);
      }
    }
  },
  mounted() {},
  components: {
    headText,
    echartCom,
    tableCom
  }
};
</script>
<style scoped lang="scss"></style>
